<template>
	<view>
		<view class="bg-white">
			<view class="flex  p-xs mb-sm modal-view">
				<view class="flex-sub padding-sm margin-xs radius"
				@tap="showModal" data-target="radio" data-type="activity">{{activityName.name}}</view>
				<view class="flex-sub padding-sm margin-xs radius">时间排序</view>
				<view class="flex-sub padding-sm margin-xs radius"
				@tap="showModal" data-target="radio" data-type="places">{{placesName.name}}</view>
				
	
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='radio'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in aRadio" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{item.name}}</view>
								<radio class="round" :class="item.checked ? 'checked' : ''" :checked="item.checked ? true : false" :value="item.value"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>




	</view>
</template>

<script>
	export default {
		name: 'h-modal',
		data() {
			return {
				modalName: null,
				radioType: '',
				activity: [{
						value: 0,
						name: '全部活动',
						checked: true,
					},
					{
						value: 1,
						name: '举办中',
						checked: false,
					},
					{
						value: 2,
						name: '已举办',
						checked: false,
					},
					{
						value: 3,
						name: '未举办',
						checked: false,
					}
				],
				places: [{
						value: 0,
						name: '双桥村',
						checked: true,
					},
				],
				checkbox: [{
						value: 0,
						name: '10元',
						checked: false,
						hot: false,
					},
					{
						value: 1,
						name: '20元',
						checked: true,
						hot: false,
					}, {
						value: 2,
						name: '30元',
						checked: true,
						hot: true,
					}, {
						value: 3,
						name: '60元',
						checked: false,
						hot: true,
					}, {
						value: 4,
						name: '80元',
						checked: false,
						hot: false,
					}, {
						value: 5,
						name: '100元',
						checked: false,
						hot: false,
					},
				]
			};
		},
		computed: {
			aRadio() {
				return this.radioType ? this[this.radioType] : [];
			},
			activityName() {
				return this.activity.filter(item=>item.checked)[0]
			},
			placesName() {
				return this.places.filter(item=>item.checked)[0]
			},
		},
		methods: {
			/**
			 * 显示隐藏多选和单选; 并给单选分类
			 * @param {Object} e
			 */
			showModal(e) {
				const {
					target,
					type
				} = e.currentTarget.dataset;
				this.modalName = target;
				this.radioType = type;
			},
			hideModal(e) {
				// 隐藏
				this.modalName = null
				this.radioType = '';
			},
			RadioChange(e) {
				this[this.radioType].forEach((item, index) => {
					if (item.value == e.detail.value) {
						item.checked = true;
					} else {
						item.checked = false;
					}
				})
				console.log(this[this.radioType])
				this.radioType = '';
				this.hideModal();
			},
			ChooseCheckbox(e) {
				let values = e.currentTarget.dataset.value;
				this.checkbox.forEach(item=>{
					// checked取反
					if (item.value == values) {
						item.checked = !item.checked;
					}
				})
				
				console.log(values, this.checkbox.map(item=>item.checked))
			}
		}
	}
</script>

<style>
	.modal-view {
		text-align: center;
		border-bottom: rgba(0, 0, 0, 0.1) 1PX solid;
	}
</style>
